<template>
    <div class="table-container">
        <el-breadcrumb separator="/" class="breadcrumb">
            <el-breadcrumb-item :to="{ path: '/plugin' }">应用插件</el-breadcrumb-item>
            <el-breadcrumb-item><a href="/">桌位管理</a></el-breadcrumb-item>
        </el-breadcrumb>
        <el-card>
            <el-tabs v-model="activeName2" type="card" @tab-click="handleClick">
                <el-tab-pane label="桌位" name="first">
                    <div class="table-pane">
                        <el-card class="box-card">
                            <div slot="header" class="clearfix">
                                <span>桌位管理</span>
                                <el-button style="float: right; padding: 10px" type="primary" @click="clickAddTable">新建桌位</el-button>
                            </div>
                            <div class="text item">
                                <el-table :data="tableData" stripe style="width: 100%">
                                    <el-table-column prop="name" label="桌号" width="180"> </el-table-column>
                                    <el-table-column prop="typeId.name" label="桌位类型"> </el-table-column>
                                    <el-table-column fixed="right"  label="操作" width="240">
                                        <template slot-scope="scope">
                                            <el-button type="primary" plain @click="downloadPic(scope.row)" size="small">下载点餐码</el-button>
                                            <el-button type="text" size="small">编辑</el-button>
                                            <el-button type="text" size="small">删除</el-button>
                                        </template>
                                        </el-table-column>
                                </el-table>
                            </div>
                        </el-card>
                    </div>
                </el-tab-pane>
                <el-tab-pane label="桌位类型" name="second">
                    <div class="table-type-pane">
                        <el-card class="box-card">
                            <div slot="header" class="clearfix">
                                <span>桌位类型管理</span>
                                <el-button style="float: right; padding: 10px" type="primary" @click="clickNewTableType">新建桌位类型</el-button>
                            </div>
                            <div class="text item">
                                <el-table :data="tableTypeData" stripe style="width: 100%">
                                    <el-table-column prop="name" label="桌位类型"> </el-table-column>
                                    <el-table-column prop="minNum" label="最小容纳人数"> </el-table-column>
                                    <el-table-column prop="maxNum" label="最大容纳人数"> </el-table-column>
                                    <el-table-column fixed="right"  label="操作" width="240">
                                        <template slot-scope="scope">
                                            <el-button type="text" size="small" @click="clickEditTableType(scope.$index, scope.row)">编辑</el-button>
                                        </template>
                                    </el-table-column>
                                </el-table>
                            </div>
                        </el-card>
                    </div>                    
                </el-tab-pane>
            </el-tabs>
        </el-card>
       
       <!-- 桌位类型弹出框 -->
       <div>
        <el-dialog :title="isEdit?'编辑桌位类型':'新建桌位类型'" :visible.sync="dialogFormVisible">
                <el-form :model="form" >
                    <el-form-item label="桌位类型:" :label-width="formLabelWidth">
                    <el-input v-model="form.name" clearable autocomplete="off" style='width:217px' placeholder="请填写类型名称"></el-input>
                    </el-form-item>
                    <el-form-item label="最少人数:" :label-width="formLabelWidth">
                    <el-input v-model="form.minNum" min='1' type='number' autocomplete="off" style='width:217px' placeholder="请填写最小容纳数"></el-input>
                    </el-form-item>
                    <el-form-item label="最多人数:" :label-width="formLabelWidth">
                    <el-input v-model="form.maxNum" min='1' type='number'  autocomplete="off" style='width:217px' placeholder="请填写最大容纳数"></el-input>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="dialogFormVisible = false">取 消</el-button>
                    <el-button type="primary" @click="AddNewTableType(isEdit)">确 定</el-button>
                </div>
            </el-dialog>
        </div>
        <!-- 桌位的弹出框 -->
        <div>
            <el-dialog :title="isTableEdit?'编辑桌位':'新建桌位'" :visible.sync="dialogTableFormVisible">
                <el-form :model="tableform" >
                    <el-form-item label="桌位类型:" :label-width="formLabelWidth">
                        <el-select v-model="tableform.id" placeholder="请选择桌位类型">
                            <el-option v-for="item in tableTypeData" :key="item.id" :label="item.name"  :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>

                    <el-form-item label="桌位编号:" :label-width="formLabelWidth">
                        <el-input v-model="tableform.name" autocomplete="off" style='width:217px' placeholder="请填写桌位编号"></el-input>
                    </el-form-item>                    
                </el-form>
                
                <div slot="footer" class="dialog-footer">
                    <el-button @click="dialogTableFormVisible = false">取 消</el-button>
                    <el-button type="primary" @click="addTable">确 定</el-button>
                </div>
            </el-dialog>
        </div>
    </div>
</template>
<script>
import  TableType from '../../../models/TableType.js'
import Table from '../../../models/Table.js'

// 引入LeanCloud存储
var AV = require('leancloud-storage');

export default {
    data(){
         return {
            activeName2: 'first',
            tableData: [
                    // {
                    //     date: '2016-05-02',
                    //     typeName: '小桌',
                    //     tableNumber: '博悦堂'
                    // }
                ],

                tableTypeData:[],
                form:{
                    name: '',
                    minNum:1,
                    maxNum:10,
                },
                formLabelWidth: '120px',
                shop_id : localStorage.getItem('shop_id'), //店铺ID
                dialogFormVisible:false, // 显示新建桌位类型弹出框
                isEdit:false,
                editRow:{},
                editIndex:-1,

                dialogTableFormVisible : false, //显示新建桌位弹出框
                isTableEdit:false, //编辑桌位的标志
                tableform:{
                    name:'',
                    id:'',
                    typeName:'',
                }
            };

    },
    mounted(){

        var shop = AV.Object.createWithoutData('Seller',this.shop_id)
        // 获取餐桌类型
        var query = new AV.Query('TableType');

        query.equalTo('shopId',shop)
        query.select(['name', 'shopId','maxNum','minNum']);
        query.find().then(results=>{
            this.tableTypeData = results
            console.log(results)
            return results
        }).catch(error=>console.log(error))

        var queryTable = new AV.Query('Table');
        queryTable.equalTo('shopId',shop)
        queryTable.include(['typeId'])
        queryTable.find().then(results=>{                
            // for (let index = 0; index < results.length; index++) {                    
            //     // results[index].typeName = this._getTypeNameById(results[index].typeId)                
            //     results[index].typeName = results[index].tableId.name//this._getTypeNameById(results[index].typeId)                
            // }

            this.tableData = results;
            console.log(results)
        })

        

    },
    methods:{
        handleClick(tab, event) {
            console.log(tab, event);
            this.activeName2 = tab.name
        },

        // 下载图片二维码
        downloadPic(index,row){
            
        },

        // 点击新建桌位
        clickAddTable(){
            this.dialogTableFormVisible = true;
        },

        // 添加桌位逻辑
        addTable(){
            let that = this
            if(!this.tableform.name || !this.tableform.id){
                this.$message.warning('参数不正确，请重新输入')
                return;
            }
            
            let table = new Table()
            table.name = this.tableform.name
            table.typeId =  AV.Object.createWithoutData('TableType',this.tableform.id);//
            table.shopId = AV.Object.createWithoutData('Seller',this.shop_id);
            table.save().then(result=>{
                var tableType = AV.Object.createWithoutData('TableType',this.tableform.id)
                tableType.fetch().then((type)=>{
                    result.typeId = type
                    this.tableData.unshift(result)
                    this.dialogTableFormVisible = false
                    that.$message(`保存成功，桌位名称为：${result.name}`)
                })
            }).catch(error=> console.log(error));


        },

        // 点击添加桌位类型按钮
        clickNewTableType(flag){            
            this.isEdit = false
            this.dialogFormVisible = true
        },

        // 处理桌位类型添加逻辑
        AddNewTableType(){
            if(this.isEdit){ //如果是编辑操作，进行编辑逻辑 
                 return this.editTableType2(this.editIndex,this.editRow)
            }
            let that = this;
            if( this.shop_id==undefined ) {
                console.log('shopId为空了')
                this.$message('添加类型错误，请重新登陆后再试一试')
                return;
            }

            if(!this.form.name || !this.form.name.trim()){
                that.$message.warning('类型名称不能为空，请修改之后再进行操作')
                return;
            }
            
            // 类型名称不能重复
            for (let index = 0; index < that.tableTypeData.length; index++) {
                const element = that.tableTypeData[index];
                if(element.name == this.form.name){
                    that.$message.warning('添加失败，类型名称已经存在，请重新输入')
                    return;
                }
            }
            if(this.form.maxNum<this.form.minNum){
                that.$message.warning('最大容纳数小于最小容纳数，请修改之后再进行操作')
                return;
            }


            let tableType = new TableType()
            tableType.name = this.form.name
            //tableType.shopId = this.shop_id,
            tableType.shopId = AV.Object.createWithoutData('Seller',this.shop_id)//that.shop_id        
            tableType.maxNum = parseInt(this.form.maxNum)
            tableType.minNum = parseInt(this.form.minNum)

            tableType.save().then(type=>{
                that.tableTypeData.unshift(type)
                console.log(type)
                    that.$message({
                    type: 'success',
                    message: '你的桌子类型是: ' + type.name
                });
                that.dialogFormVisible = false
            })
        },

        // 点击编辑桌位类型
        clickEditTableType(index,row){
            this.form.name = row.name;
            this.form.maxNum = row.maxNum;
            this.form.minNum = row.minNum
            
            this.dialogFormVisible = true;
            this.isEdit = true;
            this.editRow = row;
            this.editIndex = index;
        },
        // 处理编辑桌位类型处理逻辑
        editTableType2(index,row){            
            let that = this;

            for ( let i = 0; i < that.tableTypeData.length; i++ ) {
                const element = that.tableTypeData[i];
                if(element.name == this.form.name && i != index){
                    that.$message.warning('修改失败，类型名称已经存在，请重新输入')
                    return;
                }
            }

            if( !this.form.name || !this.form.name.trim() ){
                that.$message.warning('类型名称不能为空，请修改之后再进行操作')
                return;
            }
            if(!this.form.maxNum || !this.form.minNum){
                that.$message.warning('容纳数量不正确，请修改之后再进行操作')
                return;
            }
            if(this.form.maxNum<this.form.minNum){
                that.$message.warning('最大容纳数小于最小容纳数，请修改之后再进行操作')
                return;
            }

            let tableType = row
            tableType.name = this.form.name,
            tableType.minNum = parseInt(this.form.minNum)
            tableType.maxNum = parseInt(this.form.maxNum)
            tableType.save().then(type=>{
                that.tableTypeData[index].name = type.name
                console.log(type)
                that.dialogFormVisible = false;
                    that.$message({
                    type: 'success',
                    message: '你修改之后的桌子类型是: ' + type.name
                });
            }).catch(error=>console.error(error))
            
        },
    },

}
</script>
<style lang="scss" scoped>
.table-container{
    padding: 10px;
    .breadcrumb{
        margin: 10px;
    }

    .table-pane{
        padding:10px;
    }
    .table-type-pane{
        padding: 10px;
    }

}
</style>


